import React, { FC, useState } from 'react';
import { Select, Button, Card, Input, Table, Pagination } from 'antd'; // 引入 Table 和 Input 组件
// import './index.css';

const { Option } = Select;

const SchoolInfoAudit: FC = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const handleExport = () => {
    console.log('导出数据');
  };

  const handleBack = () => {
    console.log('返回');
  };

  const handleSave = () => {
    console.log('保存并提交');
  };

  // 表格列定义
  const columns = [
    {
      title: '学生编码',
      dataIndex: 'studentCode',
    },
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '学籍号',
      dataIndex: 'studentId',
    },
    {
      title: '性别',
      dataIndex: 'gender',
    },
    {
      title: '毕业类型',
      dataIndex: 'graduationType',
    },
    {
      title: '毕业年月',
      dataIndex: 'graduationDate',
    },
    {
      title: '个人照片',
      dataIndex: 'photo',
    },
    {
      title: '毕业证书',
      dataIndex: 'certificate',
    },
    {
      title: '生成时间',
      dataIndex: 'generatedTime',
    },
    {
      title: '操作',
      dataIndex: 'action',
    },
  ];

  // 示例数据
  const dataSource = [
    {
      key: '1',
      studentCode: 'S001',
      name: '张三',
      studentId: '2023001',
      gender: '男',
      graduationType: '本科',
      graduationDate: '2024-06',
      generatedTime: '2023-09-01',
    },
    {
      key: '2',
      studentCode: 'S002',
      name: '李四',
      studentId: '2023002',
      gender: '女',
      graduationType: '专科',
      graduationDate: '2024-06',
      generatedTime: '2023-09-01',
    },
    {
      key: '2',
      studentCode: 'S002',
      name: '李四',
      studentId: '2023002',
      gender: '女',
      graduationType: '专科',
      graduationDate: '2024-06',
      generatedTime: '2023-09-01',
    },
    {
      key: '2',
      studentCode: 'S002',
      name: '李四',
      studentId: '2023002',
      gender: '女',
      graduationType: '专科',
      graduationDate: '2024-06',
      generatedTime: '2023-09-01',
    },
    {
      key: '1',
      studentCode: 'S001',
      name: '张三',
      studentId: '2023001',
      gender: '男',
      graduationType: '本科',
      graduationDate: '2024-06',
      generatedTime: '2023-09-01',
    },
    {
      key: '2',
      studentCode: 'S002',
      name: '李四',
      studentId: '2023002',
      gender: '女',
      graduationType: '专科',
      graduationDate: '2024-06',
      generatedTime: '2023-09-01',
    },
    {
      key: '2',
      studentCode: 'S002',
      name: '李四',
      studentId: '2023002',
      gender: '女',
      graduationType: '专科',
      graduationDate: '2024-06',
      generatedTime: '2023-09-01',
    },
    {
      key: '2',
      studentCode: 'S002',
      name: '李四',
      studentId: '2023002',
      gender: '女',
      graduationType: '专科',
      graduationDate: '2024-06',
      generatedTime: '2023-09-01',
    },
    {
      key: '1',
      studentCode: 'S001',
      name: '张三',
      studentId: '2023001',
      gender: '男',
      graduationType: '本科',
      graduationDate: '2024-06',
      generatedTime: '2023-09-01',
    },
    {
      key: '2',
      studentCode: 'S002',
      name: '李四',
      studentId: '2023002',
      gender: '女',
      graduationType: '专科',
      graduationDate: '2024-06',
      generatedTime: '2023-09-01',
    },
    {
      key: '2',
      studentCode: 'S002',
      name: '李四',
      studentId: '2023002',
      gender: '女',
      graduationType: '专科',
      graduationDate: '2024-06',
      generatedTime: '2023-09-01',
    },
    {
      key: '2',
      studentCode: 'S002',
      name: '李四',
      studentId: '2023002',
      gender: '女',
      graduationType: '专科',
      graduationDate: '2024-06',
      generatedTime: '2023-09-01',
    },
    // 可以更多数据
  ];

  return (
    <div>
      <div
        style={{
          backgroundColor: 'white',
          padding: '20px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
          marginBottom: '20px',
          fontSize: '20px',
          fontWeight: 'bold',
        }}
      >
        毕业证管理
      </div>
      <Card
        style={{
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
        }}
      >
        <div className="slectr">
          <div style={{ marginBottom: '20px', display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
            {/* 第一行选择框和标题 */}
            <div style={{ width: '15%', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
              <label style={{ marginRight: '8px' }}>国家学籍号：</label>
              <Select defaultValue="请选择" style={{ flex: 1 }}>
                <Option value="1">选项1</Option>
                <Option value="2">选项2</Option>
                <Option value="3">选项3</Option>
              </Select>
            </div>
            <div style={{ width: '15%', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
              <label style={{ marginRight: '8px' }}>学生编号：</label>
              <Select defaultValue="请选择" style={{ flex: 1 }}>
                <Option value="1">选项1</Option>
                <Option value="2">选项2</Option>
                <Option value="3">选项3</Option>
              </Select>
            </div>
            <div style={{ width: '15%', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
              <label style={{ marginRight: '8px' }}>姓名：</label>
              <Select defaultValue="请选择" style={{ flex: 1 }}>
                <Option value="1">选项1</Option>
                <Option value="2">选项2</Option>
                <Option value="3">选项3</Option>
              </Select>
            </div>
            <div style={{ width: '15%', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
              <label style={{ marginRight: '8px' }}>性别：</label>
              <Select defaultValue="请选择" style={{ flex: 1 }}>
                <Option value="男">男</Option>
                <Option value="女">女</Option>
              </Select>
            </div>
            <div style={{ width: '15%', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
              <label style={{ marginRight: '8px' }}>年级：</label>
              <Select defaultValue="请选择" style={{ flex: 1 }}>
                <Option value="一年级">一年级</Option>
                <Option value="二年级">二年级</Option>
              </Select>
            </div>
            <div style={{ width: '15%', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
              <label style={{ marginRight: '8px' }}>班级：</label>
              <Select defaultValue="请选择" style={{ flex: 1 }}>
                <Option value="一年级">1级</Option>
                <Option value="二年级">2级</Option>
              </Select>
            </div>
          </div>

          {/* 新增的第二行选择框和标题 */}
          <div style={{ marginBottom: '20px', display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
            <div style={{ width: '16%', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
              <label style={{ marginRight: '8px' }}>身份证类型：</label>
              <Select defaultValue="请选择" style={{ flex: 1 }}>
                <Option value="1">身份证</Option>
                <Option value="2">护照</Option>
                <Option value="3">军官证</Option>
              </Select>
            </div>
            <div style={{ width: '16%', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
              <label style={{ marginRight: '8px' }}>身份证号码：</label>
              <Input placeholder="请输入身份证号码" style={{ flex: 1 }} />
            </div>
            <div style={{ width: '16%', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
              <label style={{ marginRight: '8px' }}>毕业类型：</label>
              <Select defaultValue="请选择" style={{ flex: 1 }}>
                <Option value="普通">普通</Option>
                <Option value="成人">成人</Option>
              </Select>
            </div>
            <div style={{ width: '16%', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
              <label style={{ marginRight: '8px' }}>毕业状态：</label>
              <Select defaultValue="请选择" style={{ flex: 1 }}>
                <Option value="已毕业">已毕业</Option>
                <Option value="未毕业">未毕业</Option>
              </Select>
            </div>
          </div>

          {/* 新增的第三行选择框和标题 */}
          <div style={{ marginBottom: '20px', display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
            <div style={{ width: '16%', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
              <label style={{ marginRight: '8px' }}>专业名称(学科门类)：</label>
              <Select defaultValue="请选择" style={{ flex: 1 }}>
                <Option value="文科">文科</Option>
                <Option value="理科">理科</Option>
                <Option value="工科">工科</Option>
              </Select>
            </div>
            <div style={{ width: '16%', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
              <label style={{ marginRight: '8px' }}>专业名称(专业类)：</label>
              <Select defaultValue="请选择" style={{ flex: 1 }}>
                <Option value="专业类1">专业类1</Option>
                <Option value="专业类2">专业类2</Option>
              </Select>
            </div>
            <div style={{ width: '16%', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
              <label style={{ marginRight: '8px' }}>专业名称(专业)：</label>
              <Select defaultValue="请选择" style={{ flex: 1 }}>
                <Option value="专业1">专业1</Option>
                <Option value="专业2">专业2</Option>
              </Select>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '20px' }}>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
              <Button type="primary" style={{ marginRight: '10px' }}>
                上传个人照片
              </Button>
              <Button type="primary" style={{ marginRight: '10px' }}>
                生成毕业证
              </Button>
              <Button type="primary" style={{ marginRight: '10px' }}>
                发起毕业证审核
              </Button>
              <Button type="primary" style={{ marginRight: '10px', background: '#656565' }}>
                下载毕业证
              </Button>
            </div>
            <div style={{ display: 'flex', gap: '10px' }}>
              <Button type="primary">查询</Button>
              <Button type="link">重置</Button>
            </div>
          </div>

          {/* 表格部分 */}
          <Table
            dataSource={dataSource}
            columns={columns}
            pagination={false}
            rowKey="studentCode"
            rowSelection={{
              onChange: (selectedRowKeys: React.Key[]) => {
                setSelectedRowKeys(selectedRowKeys);
              },
            }}
          />
          {/* 底部分页 */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 50px' }}>
            <div style={{ color: '#666666' }}>共 40 条 记 录&emsp;第 1 / 20 页</div>
            <Pagination
              className="zzpc_pagination"
              style={{ margin: '20px 0' }}
              align="center"
              total={dataSource.length}
              showSizeChanger
              showQuickJumper
            />
          </div>
        </div>
      </Card>
    </div>
  );
};

export default SchoolInfoAudit;
